<template>
	<view class="wrapper">
		<view class="header">
			<view class="logo">未保预警中心</view>
			<span class="iconfont icon-dengchu" @click="goToPage('/pages/login/login')"></span>
		</view>

		<view class="user-info">
			<uni-icons type="contact" color="#4BB7DB"></uni-icons>当前用户：xxx单位/某某
		</view>

		<view class="space"></view>

		<view class="menu">
			<view class="menu-list" @click="goToPage('/pages/early-warning-list/index')">
				<view class="title">预警中心</view>
				<view class="describe">展示执行布控任务生成的预警消息，并支持按流程角色进行处置。</view>
				<!-- <img class="menu-icon" src="../../static/warning.png"></img> -->
				<uni-icons type="notification-filled" class="menu-icon" color="#4BB7DB"></uni-icons>
			</view>

			<view class="menu-list" @click="goToPage('/pages/work-order-list/index')">
				<view class="title">工单处理</view>
				<view class="describe">展示当前待处理工单任务，处理操作支持上传图片。</view>
				<!-- <img class="menu-icon" src="../../static/work-order.png"></img> -->
				<uni-icons type="calendar-filled" class="menu-icon" color="#EFAF05"></uni-icons>
			</view>

			<view class="menu-list">
				<navigator url="/pages/work-order-list/index">
					<view class="title">视频监控</view>
					<view class="describe">展示辖区内视频监控点位,可以对任意资源进行历史录像回放。</view>
					<!-- <img class="menu-icon" src="../../static/monitor.png" /> -->
					<uni-icons type="videocam-filled" class="menu-icon" color="#30DCAA"></uni-icons>
				</navigator>
			</view>

			<view class="menu-list">
				<navigator url="/pages/work-order-list/index">
					<view class="title">数据上报</view>
					<view class="describe">用户可以选择模板实例进行数据上报，且可以查看个人上报历史。</view>
					<!-- <img class="menu-icon" src="../../static/data-report.png" /> -->
					<uni-icons type="upload-filled" class="menu-icon" color="#65BDE5"></uni-icons>
				</navigator>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";


	function goToPage(url) {
		// 使用uni.navigateTo跳转到指定页面
		uni.navigateTo({
			url
		});
	}
</script>

<style lang="scss" scoped>
	@font-face {
	  font-family: "iconfont"; /* Project id  */
	  src: url('../../static/fonts/iconfont.ttf?t=1736433730909') format('truetype');
	}
	
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 48rpx;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.icon-dengchu:before {
	  content: "\e663";
	}
	
	.header {
		padding-top: $myuni-spacing-lg;
		padding-bottom: calc(10 * $myuni-spacing-lg);
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.logo {
			height: 80rpx;
			line-height: 80rpx;
			width: 400rpx;
			background-image: url("/static/logo.png");
			background-size: 80rpx 80rpx;
			background-repeat: no-repeat;
			padding-left: 90rpx;
			font-size: 48rpx;
			font-weight: bold;
		}
	}

	.user-info {
		padding: $myuni-spacing-lg;
		background: #f2f5fa;
		height: 100rpx;
		border-radius: $myuni-border-radius-lg;
		box-sizing: border-box;
		font-size: $myuni-font-size-base;
		display: flex;
		align-items: center;
		box-shadow: 0 0 3rpx #E1E1E1;

		.uni-icons {
			font-size: 40rpx !important;
			margin-right: $myuni-spacing-base;
		}
	}

	.menu {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: $myuni-spacing-super-lg;

		// navigator {
		// 	display: block;
		// 	margin: 0 !important;
		// 	padding: 0 !important;
		// 	width: 310rpx;
		// 	height: 335rpx;
		// 	border: 1px solid #000;
		// }
	}

	.menu-list {
		padding: $myuni-spacing-lg;
		background: #eef7f6;
		height: 255rpx;
		border-radius: $myuni-border-radius-lg;
		position: relative;
		box-shadow: 0 0 3rpx #E1E1E1;

		.uni-icons {
			font-size: 80rpx !important;
		}

		.menu-icon {
			position: absolute;
			right: $myuni-spacing-base;
			bottom: $myuni-spacing-base;
		}
	}

	.menu-list:nth-child(1) {
		background: #EEF9FF;
	}

	.menu-list:nth-child(2) {
		background: #FDF6E4;
	}

	.menu-list:nth-child(3) {
		background: #EAFBF5;
	}

	.menu-list:nth-child(4) {
		background: #EEF9FF;
	}

	.title {
		font-size: $myuni-font-size-lg;
		color: $myuni-text-color;
		margin-bottom: $myuni-spacing-base;
	}

	.describe {
		font-size: $myuni-font-size-sm;
		color: $myuni-text-color-grey;
		line-height: calc(1.5 * $myuni-font-size-sm);
	}
</style>